<template>
  <article>
    <h2>{{ lang?.title }}</h2>
    <p>{{ lang?.p1 }}</p>
    <h4>{{ lang?.h2 }}</h4>
    <ul>
      <li>{{ lang?.li1 }}</li>
      <li>{{ lang?.li2 }}</li>
      <li>{{ lang?.li3 }}</li>
      <li>{{ lang?.li4 }}</li>
      <li>{{ lang?.li5 }}</li>
    </ul>
    <h4>{{ lang?.h3 }}</h4>
    <p>{{ lang?.p3 }}</p>
    <p>{{ lang?.p4 }}</p>
  </article>
</template>

<script setup>
import { useI18nPack } from '@/compositions/request/i18nPack'

const lang = useI18nPack('suc')
</script>

<style lang="scss" scoped>
article {
  overflow: auto;
  padding-right: 1rem;

  &::-webkit-scrollbar {
    display: flex;
    width: 0.25rem;
  }

  &::-webkit-scrollbar-track {
    background: var(--color-primary-divider, rgba(215, 215, 215, 0.4));
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 0.09375rem;
    border: 0.35rem solid transparent;
    background: var(--color-primary-divider, rgba(215, 215, 215, 1));
  }
}
h2 {
  text-align: center;
}

p,
li {
  margin: 1rem auto;
}

li {
  margin-left: 1rem;
}
</style>
